<!-- 手机登录界面-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>手机号登录界面</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>
	<style>
			body {
				background-color:#fff;
			}
			.header-bc{
				background-color: #fff;
			}

			.index-header{
				display: flex;
				height: 50px;
				width: 100%;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				color: #000001;
				font-size:18px;
			}
			.index-nav{
				display: flex;
				height: 50px;
				width:100%;
				justify-content:space-around;
				align-items: center;
				background-color: #fff;
				color: #FEFEFE;
				font-size: 15px;
			}
			.xiahuaxian-row{
				position:relative;
			}
			.xiahuaxian{
				position: absolute;
				top: -5px;
				left: -7px;
				width: 75px;
				height: 8px;
				float:left;
				border-radius:4px;
				background: linear-gradient(to right, rgba(246,224,166,0.9) ,rgba(196,161,98,0.9));
			}
			.bott{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items:center;
					padding: 0.36rem 0.40rem;
					margin-top: 3.20rem;
					font-size: 0.30rem;
				}
				.bott-btn{
					margin-top: 0.4rem;
					font-size: 0.30rem;
					color: #A48347;
					width: 6rem;
					height: 1rem;
					border-radius: 0.50rem;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(to right ,#F6E0A6 , #C4A162 );
				}
				.bott-btn1{
					margin-top: 0.4rem;
					font-size: 0.30rem;
					color: #A48347;
					width: 6rem;
					height: 1rem;
					border-radius: 0.50rem;
					display: flex;
					justify-content: center;
					align-items: center;
					border: solid #A48347 1px;
					/*background: linear-gradient(to right ,#F6E0A6 , #C4A162 );*/
				}
				.top{
					margin-top: 0.20rem;
					background-color: #FFFFFF;
				}
				.row{
					display: flex;
					padding: 0.36rem 0.28rem;

				}
				.row-title{
					font-size: 0.32rem;
					color: #333333;
					margin-top: 0.06rem;
				}
				.row-inp{
					flex-grow:1;
				}
				.inp{
					width: 100%;
					border: solid #F8F8F8 0px;
					padding-top: 0.05rem;
				}
				.login-img{
					width: 1.50rem;
					height: 2.60rem;
				}
				.login-img1{
					width: 0.4rem;
					height: 0.4rem;
					margin-right: 0.1rem;
				}
				.login-log{
					display: flex;
					justify-content: center;
					margin-top: 2rem;
				}
				.title{
					margin: 0.7rem 0;
					color: 383642;
				  font-size: 	0.5rem;
				}
				.content{
					padding: 0 0.5rem ;
				}
				.inp-row{
					padding: 0.4rem 0;
					border-bottom: solid #F8F8F8 1px;
				}
				.yzm{
					width: 3rem;
					color: #999;
				}
				.submit1{
					margin-top: 1.30rem;
					width: 100%;
					height: .80rem;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #ff502d;
					color: #fff;
					line-height: .60rem;
					border-radius:0.1rem;
					font-size: .32rem;
				}



	</style>
</head>
<body>
	<!-- 标题栏 -->
		<div id="header" class="header-bc framepage">
			<!-- 返回按钮 -->
			<div style="position: absolute;color: #000;line-height: 45px;padding: 0 20px;" onclick="closeWin()">
  				<div style="transform: rotateY(180deg);font-size: 18px;margin-top:5px" class="icon iconfont">&#xe644;</div>
					<!-- <div style="transform: rotateY(180deg);font-size: 20px;font-weight: 600;" class="iconfont iconjiantou"></div> -->
			</div>
			<div class="index-header">
					<!-- 登录界面 -->
			</div>
		</div>
		<div class="content app">
			<div class="title">
				手机号登录/注册
			</div>
			<div class="inp-row">
				<input type="number"  v-model="phone" name="" value="" placeholder="请输入手机号" class="inp">
			</div>
			<div class="inp-row" style="display:flex;">
				<input type="number"  v-model="code" name="" value="" placeholder="请输入手机验证码" class="inp">
				<div class="yzm" @click="getSendVerificationCode()">{{text}}</div>
			</div>
			<div class="submit1" style="margin-top:1.5rem;" @click="login_phone()">
				确定
			</div>
		</div>


</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script src="../plugin/Jpush.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){

	// 实现沉浸式状态栏效果
	$api.fixStatusBar(header);
	// 极光推送
	Jpushid_Init(".pid");
	index()
	// 监听页面打开
	 api.addEventListener({
			 name: 'viewappear'
	 }, function(ret, err) {
			setTimeout(function() {
				api.setStatusBarStyle({
						style: 'dark'
				});
			}, 250)
	 });

});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			isIndex:0,
			list:[1,2,3],
			code:'',
			phone:'',
			intervalID:'',//定时器
			time:'',
			text:'发送验证码'
		},

		methods: {
			//定时器
			mysetInterval(){
					this.intervalID = setInterval(this.callback, 1000)
			},
			//定时器回调函数
			callback (){
				if(this.time <= 0){
					this.text = "重新发送"
					clearInterval(this.intervalID)//关闭定时器
					this.intervalID = ''
					return
				}

				this.time =this.time - 1
				this.text = this.time+'秒'
				console.log("定时器打印")
			},
			/**
			判断字符串是否是手机号码，若是则返回true,若否则返回false
			**/
			isPhone:function (phone){
				return /^1(3\d|4\d|5\d|6\d|7\d|8\d|9\d)\d{8}$/g.test(phone);
			},
			//点击默认地址
			onDjmr: function (index) {
				this.isIndex = index
			},
			//获取验证码
			getSendVerificationCode: function (){
				if(this.text != "重新发送" && this.text !="发送验证码") return

				if(!this.phone){
					api.toast({
						msg:'请输入手机号',
						duration: 2000,
						location: 'middle'
					});
					return
				}
				if(!this.isPhone(this.phone)){
					api.toast({
						msg:'手机号格式不正确！',
						duration: 2000,
						location: 'middle'
					});
					return
				}
				let param = {
						phone:this.phone
				}
				AjaxSafe({
			   		url:"/xapp/app/login/sendVerificationCode",
			    	data:param,
			    	loader:true,
					success: function(res) {
					    if (res.state) {
									api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
									if(res.msg == "发送成功！"){
										if(!vm.intervalID){
											vm.mysetInterval()//打开定时器
											vm.time = 60
											vm.text = '60秒'
										}
									}

					    } else {
					    	api.toast({
									msg: res.msg,
									duration: 2000,
									location: 'middle'
								});
					    }
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},

			//登录
			login_phone: function (){
				if(!this.phone){
					api.toast({
						msg:'请输入手机号',
						duration: 2000,
						location: 'middle'
					});
					return
				}
				if(!this.isPhone(this.phone)){
					api.toast({
						msg:'手机号格式不正确！',
						duration: 2000,
						location: 'middle'
					});
					return
				}
				if(!this.code){
					api.toast({
						msg:'验证码不能为空',
						duration: 2000,
						location: 'middle'
					});
					return
				}
				let param = {
						phone:this.phone,
						code:this.code
				}
				AjaxSafe({
						url:"/xapp/app/login/phone",
						data:param,
						loader:true,
					success: function(res) {
						if( res.msg == "success" )
						{
							clearInterval(this.intervalID)//关闭定时器
							this.intervalID = ''
							localdata.set("userinfo",res.data);
							hhWin.shut("login",500);
							hhWin.shut(600);
							open_menu(1);
						}
						else
						{
							Jpushid_Init(".pid");
							hhPanel.msg(res.msg);
						}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},



		},

		mounted: function(){
			// 按两次返回键退出
			// KeybackExitApp();

		},
	});
}

function login() {
	var wx = api.require('wx');
	wx.auth({
	    apiKey: ''
	}, function(ret1, err) {
	    if (ret1.status) {
	        // alert(JSON.stringify(ret));
					wx.getToken({
					    apiKey: '',
					    apiSecret: '',
					    code: ret1.code
					}, function(ret2, err) {
					    if (ret2.status) {
					        // alert(JSON.stringify(ret));
									wx.getUserInfo({
									    accessToken: ret2.accessToken,
									    openId: ret2.openId
									}, function(ret3, err) {
									    if (ret3.status) {
									        // alert(JSON.stringify(ret));
													AjaxSafe({
														url: "xapp/app/login/weixin",
														data: {
																unionid: ret3.unionid,
																openid: ret3.openid,
																headimgurl: ret3.headimgurl,
																nickname: ret3.nickname,
																province: '',
																city: '',
																jpushid: $(".pid").val()
																// code: ret.code,
																// group_id: 31,
																// wxa_appid: 'wx794f110f8412df72',
																// sessionId: '02085def4520ab40e513416445d3e388',
														},
														success: function(ret4){
																// alert(JSON.stringify(ret4.data.login_token));
																// console.log(JSON.stringify(ret));
																if( ret4.msg == "success" )
																{
																	localdata.set("userinfo",ret4.data);
																	// api.setGlobalData({
																	//     key: 'token',
																	//     value: ret4.data.login_token
																	// });
																	api.setGlobalData({
																	    key: 'token',
																	    value: ret4.data.login_token
																	});
																	hhWin.shut(500);
																	open_menu(1);
																	// api.sendEvent({name:"evt_UserLogin"});
																}
																else
																{
																	Jpushid_Init(".pid");
																	hhPanel.msg(ret.msg);
																}
														},
														failed: function(err){
																// alert("最后难逃没网的命运");
														}
												});
									    } else {
									        alert(err.code);
									    }
									});
					    } else {
					        alert(err.code);
					    }
					});
	    } else {
	        alert(err.code);
	    }
	});
}
</script>
</html>
